<template>
  <section>

    <div class="banner" v-if="adv.length > 0">
      <!--v-if="volist.length!==0"-->
      <a v-if="adv[0].path" :href="adv[0].path" target="_blank">
        <img :src="adv[0].picturePath | imgCdn" :alt="adv[0].name"/>
      </a>

      <a v-else>
        <img :src="adv[0].picturePath | imgCdn" :alt="adv[0].name"/>
      </a>

    </div>

    <div class="container">
      <header class="breadcrumb-wrap">
        <el-breadcrumb class="breadcrumb pull-left" separator=">">
          <span class="pull-left">当前位置：</span>
          <el-breadcrumb-item>
            <nuxt-link class="text-primay-hover" :to="{ path: '/' }">首页</nuxt-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>采购信息</el-breadcrumb-item>
        </el-breadcrumb>
      </header>

      <nav id="lists" style="top: -35px; position: relative"></nav>
      <div class="types">
        <nuxt-link :to="{path: `/purchase`, query: {category: undefined}, hash: 'lists'}"
                   @click.prevent="changeCategory({})"
                   :class="{'active': !category}">全部
        </nuxt-link>
        <nuxt-link
          :to="{path: `/purchase`, query: {category: item.id}, hash: 'lists'}"
          v-for="item in categorys"
          :class="{'active': item.id === category}"
          :key="item.goodsCateId">{{ item.name}}
        </nuxt-link>
      </div>

      <div class="purchases">
        <el-row :gutter="10">
          <el-col :span="12" v-for="purchase in purchases" :key="purchase.demandId">
            <Purchase class="purchase" :purchase="purchase" :user="user"></Purchase>
          </el-col>
        </el-row>
      </div>

      <!--分页-->
      <el-pagination
        v-if="totalPage > 1"
        class="pagination"
        @current-change="pageChange"
        :current-page.sync="page"
        :page-count="totalPage"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>

    </div>
  </section>
</template>

<script>
  import axios from '~/plugins/axios'
  import {ObjectMap} from '~/plugins/utils'
  import Purchase from '~/components/Purchase.vue'

  export default {
    data () {
      return {
      }
    },

    mounted () {
      if (Object.keys(this.$route.query).length > 0) {
        location.hash = '#lists'
      }
    },
    methods: {

      setRouter () {
        this.$router.push({
          path: '/purchase',
          query: ObjectMap({
            category: this.category,
            page: this.page
          }),
          hash: 'lists'
        })
      },

      // 分页改变
      pageChange (p) {
        this.page = p
        this.setRouter()
      },

      // 分类改变执行操作
      changeCategory (item) {
        this.category = item.goodsCateId
        this.query()
      },

      // 查询列表
      async query () {
        const q = {
          currentPage: this.page,
          sort: 'releaseTime DESC',
          pageSize: 8
        }
        if (this.category) {
          q.productType = this.category
        }
        const {result: purchases = [], totalPage = 0} = await axios.get('/search/demand', {params: q}).then(data => data.data.data)
        this.purchases = purchases
        this.totalPage = totalPage
      }
    },

    watch: {
      async user () {
        if (this.user.userId) {
          this.query()
        }
      }
    },

    head () {
      let seo = {
        title: `矿产采购信息 - 聚贸矿产`,
        desc: `聚贸矿产采购信息，提供矿产求购动态，帮助买卖双方快速达成交易。`
      }
      return {
        title: seo.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: seo.desc
        }]
      }
    },

    async asyncData ({query, store}) {
      const category = parseInt(query.category, 10) || 0
      const categorys = store.state.cates.cates || []
      const page = query.page || 1

      // 广告
      const store_adv = store.state.advs.purchaseAdv || []

      let q = {
        currentPage: page,
        sort: 'releaseTime DESC',
        pageSize: 8
      }

      if (category !== 0) {
        q.productType = category
      }

      const [{result: purchases = [], totalPage = 0}, {backgroundAd: adv = []}] = await Promise.all([
        axios.get('/search/demand', {params: q}).then(data => data.data.data),
        axios.get('/demand/topAdv').then(data => data.data.data)
      ])

      return {
        page,
        category,
        purchases,
        totalPage,
        categorys,
        adv
      }
    },

    computed: {
      user () {
        return this.$store.state.user.user
      }
    },

    components: {
      Purchase
    }
  }
</script>

<style lang="scss" scoped>
  @import "../element-variables";

  .banner {
    width: 100%;
    height: 380px;
    overflow: hidden;
    a {
      display: block;
      width: 100%;
    }
    img {
      height: 380px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .banner-link {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .purchases {
    min-height: 260px;
    padding-top: 10px;
  }

  .types {
    background-color: #f5f5f5;
    color: #6e6e6e;
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid #dedede;

    a {
      display: block;
      line-height: 44px;
      text-align: center;
      float: left;
      padding: 0 10px;
      min-width: 100px;

      &:hover {
        color: #e8af68;
      }
    }

    .active {
      color: #fff;
      background-color: #e8af68;
      &:hover {
        color: #fff;
      }
    }
  }
</style>
